<template>
  <el-dialog
    title="编辑费率"
    :visible="dialogVisible"
    width="80%"
    @close="dialogVisible = false"
  >
    <div class="table-container">
      <el-table border style="width: 100%" :data="listOrgProductRateList">
        <el-table-column label="sku名称" prop="skuName" align="center" />

        <el-table-column label="缴费方式" align="center">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.paymentMethod">
              <el-option
                v-for="item of paymentOptions"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <el-select size="mini" v-model="scope.row.priceType">
              <el-option
                v-for="item of priceTypes"
                :key="item.value"
                :label="item.label"
                :value="Number(item.value)"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column label="值" prop="priceTypeVal" align="center">
          <template slot-scope="scope">
            <el-input-number
              size="mini"
              v-model="scope.row.priceTypeVal"
              :controls="false"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false" size="mini">取消</el-button>
      <el-button type="primary" size="mini" @click="handleSubmit"
        >提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  httpBindOrgProductRate,
  httpListOrgProductRate,
} from "@/api/orgProduct";
import { paymentMethods, priceTypes } from "@/utils/constant/pms";

export default {
  name: "SetProductRate",

  props: {
    show: { type: Boolean, default: false },
    organizationId: { type: Number },
    productId: { type: Number },
  },

  data() {
    return {
      listOrgProductRateList: [],
      paymentOptions: paymentMethods.toKeyValueArray(),
      priceTypes: priceTypes.toKeyValueArray(),
    };
  },

  computed: {
    dialogVisible: {
      get() {
        return this.show;
      },
      set() {
        this.$emit("dialog-visible");
      },
    },
  },

  watch: {
    show(val) {
      if (val) {
        this.init();
      }
    },
  },

  methods: {
    async handleSubmit() {
      await httpBindOrgProductRate({
        organizationId: this.organizationId,
        productRates: this.listOrgProductRateList,
      }).then((res) => {
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: res.message,
          });

          this.dialogVisible = false;
        }
      });
    },

    init() {
      httpListOrgProductRate({
        organizationId: this.organizationId,
        productId: this.productId,
      }).then((res) => {
        if (res.code === 200) {
          res.data.forEach(item => {
            if (!item.productId) {
              item.productId = this.productId
            }
          })
          this.listOrgProductRateList = res.data;
        }
      });
    },
  },
};
</script>

<style scoped></style>
